<template>
    <div>
        <div class="toolbar">
            <!-- <el-collapse >
                <el-collapse-item title="点击筛选" name="1" class="queryParam"> -->
            <el-form :inline="true" :model="q" size="mini">
                <el-form-item label="操作者:">
                    <el-select v-model="q.operator" clearable filterable placeholder="请选择">
          <el-option
            v-for="item in userList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
                    <!-- <el-input v-model="q.operator" placeholder="操作者ID"  onkeyup="value=value.replace(/[^\d]/g,'')" prefix-icon="el-icon-edit"></el-input> -->
                </el-form-item>
                <el-form-item label="资源:">
                    <el-input v-model="q.resource" placeholder="资源" prefix-icon="el-icon-edit"></el-input>
                </el-form-item>
                <el-form-item label="操作时间">
                    <el-date-picker   v-model="q.created_at_begin" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期时间"></el-date-picker>
                    -
                    <el-date-picker   v-model="q.created_at_end"  value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期时间"></el-date-picker>
                </el-form-item>

                <el-form-item label="动作">
                    <el-select v-model="q.action" clearable placeholder="请选择">
                        <el-option label="所有" :value=null></el-option>
                        <el-option v-for="(statu, index) of actionOption" :key="index" :label="statu" :value="index"></el-option>
                    </el-select></el-form-item>

                <el-form-item label="ip:">
                    <el-input v-model="q.ip" placeholder="ip" prefix-icon="el-icon-edit"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="query">查询</el-button>
                    <el-button type="danger" @click="reload">重置</el-button>
                </el-form-item>
            </el-form>
                <!-- </el-collapse-item>
            </el-collapse> -->
        </div>
        <el-table :data="listData.items" v-loading.body="listLoading" @sort-change="sortlist" size="mini" stripe border fit highlight-current-row>
            <el-table-column prop="created_at" label='操作时间' sortable width="200"></el-table-column>
            <el-table-column prop="operator_name" label='操作者' width="160"></el-table-column>
            <el-table-column prop="resource" label='资源' width="160"></el-table-column>
            <el-table-column prop="resource_name" label='资源名称' width="160"></el-table-column>
            <el-table-column prop="resource_id" label='资源ID' width="80"></el-table-column>
            <el-table-column prop="action" label='动作' width="80">
                <template slot-scope="scope">{{actionOption[scope.row.action]}}</template>
            </el-table-column>
            <el-table-column prop="ip" label='ip' width="160"></el-table-column>
            <el-table-column prop="user_agent" label='设备' min-width="200"></el-table-column>
            <el-table-column prop="content" label='内容' min-width="380">
                <template slot-scope="scope"><div class="ellipsis">{{scope.row.content}}</div></template>
            </el-table-column>
            <el-table-column label="操作" width="100"  fixed="right">
                <template slot-scope="scope">
                    <div>
                        <el-button type="primary" size="mini" icon="el-icon-view" @click="viewC(scope.row)"  >查看</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination  @size-change="handleSizeChange" @current-change="handleCurrentChange"
                            :current-page="q.page_no" :page-sizes="$store.state.app.pageSizeArr"
                            :page-size="q.page_size"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="listData.total">
            </el-pagination>
        </div>

        <el-dialog :close-on-click-modal="false" title="内容详情" :visible.sync="showContent" width="30%" class="showContent">
            <ul>
                <li v-for="(cont, key) of DetailContent" :key="key">{{key}} => {{cont}}</li>
            </ul>
        </el-dialog>
<!--        <save-update  v-if="showUpdate" :showUpdate.sync="showUpdate" :id="show_id"-->
<!--                       ></save-update>-->
    </div>
</template>

<script>
    import {queryFilter} from '@/utils/patch'
    import {getRecordList,getUserList} from '@/api'
    export default {
        data() {
            return {
                listData: {},
                q: {page_size: 30, page_no: 1},
                listLoading: false,
                showUpdate: false,
                userList:[],
                showContent: false,
                show_id: null,
                DetailContent: false,
                actionOption:{
                    1: '创建',
                    2: '更新',
                    3: '删除',
                },

            }
        },
        activated(){
            this.getList()
            getUserList({page_size: 30, page_no: 1}).then(res => {
          if(res.status === 0){
            this.userList = res.data.items
          }
        })
        },
        deactivated(){
            this.listLoading = false
        },
        methods: {
            viewC(row){
                this.showContent = true
                if(row.content==""){
                    this.DetailContent =""
                }else{
                this.DetailContent = JSON.parse(row.content)}
            },
            add(){
                this.show_id = null
                this.showUpdate = true
            },
            update(row){
                this.show_id = row.id
                this.showUpdate = true
            },
            remove(){
            },
            query(){
                this.q = Object.assign(this.q, {page_no: 1, page_size: 30})
                this.getList()
            },
            reload() {
                this.q = {page_size: 30, page_no: 1}
                this.getList()
            },
            sortlist(sort){
                this.q.$orderby = sort.prop
                this.getList()
            },
            handleSizeChange (val) {
                this.q.page_size = val
                this.getList()
            },
            handleCurrentChange (val) {
                this.q.page_no = val
                this.getList()
            },
            getList(){
                this.q= queryFilter(this.q) ;
                getRecordList(this.q).then(res => {
                    if(res.status === 0){
                        this.listLoading = false
                        this.listData = res.data
                    }
                })
            }
        },
        watch: {
            showUpdate() {
                if(!this.showUpdate){
                    this.getList()
                }
            },

        }
    }
</script>

<style lang="scss">
    .queryParam div{
        background: #f2f2f2;
        .el-collapse-item__content{
            padding-bottom: 0;
        }
    }
    .showContent{
        .el-dialog__body{
            padding-top: 5px;
        }
    }
</style>
